<template>
    <div class="index">
        <el-container>
             <!--侧边菜单 Aside 原本是200-->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <el-tooltip
                    class="item"
                    effect="light"
                    :content="isCollapse ? '展开' : '折叠'"
                    placement="top-start">
                    <div class="toggle-button" @click="toggleCollapse">

                        <div class="toggle-button" @click="toggleCollapse">
                           <img src="../assets/logo.png" class="sidebar-logo" alt="">
                           <span>学之思管理端</span>
                        </div>
                    </div>
                </el-tooltip>
                <el-menu
                    class="el-menu-vertical-demo"
                    :default-active="active"
                    :router="router"
                    id="nav"
                    style="font-size: 18px"
                    background-color="#4a5064"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition="false">
                    <el-submenu :index="sysMenu.path" v-for="sysMenu in menuList" :key="sysMenu.menuId">
                    <template slot="title">
                        <i :class="sysMenu.icon"></i>
                        <span slot="title">{{ sysMenu.menuName }}</span></template>
                    <el-menu-item :index="item.path" v-for="item in sysMenu.children" :key="item.menuId">
                        <i :class="item.icon"></i>
                        <router-link :to="item.path">{{ item.menuName }}</router-link>
                    </el-menu-item>

                    <!-- <el-menu-item index="/orderWrite">
                        <i class="el-icon-notebook-2"></i>
                        <router-link to="/Tbteacher">教师列表</router-link>
                    </el-menu-item>

                    <el-menu-item index="/orderWrite">
                        <i class="el-icon-notebook-2"></i>
                        <router-link to="/Tbadmin">管理员列表</router-link>
                    </el-menu-item> -->
                    </el-submenu>        
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>布局设置</el-dropdown-item>
                        <el-dropdown-item>
                            <a @click="loginOut">退出登录</a>
                        </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span class="adc">{{realName}}</span>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
import { removeToken } from '@/util/auth'
import store from '@/store'
export default {
    name: "Index",
    data() {
        return {
            isCollapse: false,
            realName:'',
            menuList:[]

        }
    },
    created(){
        this.realName =sessionStorage.getItem("Name")
        this.menuList = store.getters.GET_MENULIST
        console.log('跳转后的路由', this.$router.getRoutes());
    },
    methods: {
        //退出登录
        loginOut(){
            axios.get("/api/user/logout").then(res=>{
                if(res.data.code ==200){
                    removeToken();
                    this.$router.push("/login").catch(()=>{});
                }else{
                    this.$message({
                        message:res.data.message,
                        type:"success"
                    })
                }
            })

        },
        //data定义：isCollapse: false
        // 方法点击|||按钮，切换菜单的折叠与展开
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        }
    }
}
</script>

<style scoped>
.el-icon-setting{
    size: 30px;
}
.adc{
    font-size: 20px;
}
  .index, .el-container{
    height: 100%;
  }
  /* .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  } */

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    background-color: #4a5064;
    color: #fff;
    line-height: 200px;
  }

  .el-aside a {
    text-decoration: none;
    color: #fff;
  }

  .el-aside .toggle-button {
    /* // 添加背景颜色 */
    background-color: #4a5064;
    /* // 设置文本大小 */
    font-size: 16px;
    /* // 设置文本行高 */
    line-height: 30px;
    /* // 设置文本颜色 */
    color: #fff;
    /* // 设置文本居中 */
    text-align: center;
    /* // 设置文本间距 */
    letter-spacing: 0.2em;
    /* // 设置鼠标悬浮变小手效果 */
    cursor: pointer;
  }

  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
      width: 0;
      height: 0;
  }
  .sidebar-logo {
    width: 45px;
    vertical-align: middle;
    margin-right: 12px;
  }


</style>